
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Facebook Overlay Example</title>

        <style type="text/css">

            * { margin: 0; padding: 0; }

            body { font: 87.50%/1.5 "Lucida Grande", Helvetica, Arial, sans-serif; }

            p { margin-bottom: 1.5em; }

            button { padding: 4px 8px; }

            #canvas { margin: 20px; }

            #fbOverlay { display: none; }

            .yui-widget #fbOverlay {
                display: block;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 6px;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                padding: 10px;
            }
            #fbOverlay .yui-widget-hd {
                border: #3B5998 1px solid;
                background: #6D84B4;
                color: #fff;
                padding: 0 10px;
                cursor: move;
            }
            #fbOverlay .yui-widget-bd {
                background: #fff;
                border: #555 1px solid;
                border-top: none;
                border-bottom : none;
                padding: 0 10px;
            }
            #fbOverlay .yui-widget-ft {
                border: #555 1px solid;
                border-top: none;
                background: #f2f2f2;
            }
            #fbOverlay .yui-widget-ft > div {
                border-top: #ccc 1px solid;
                padding: 5px 10px;
                text-align: right;
            }

        </style>

    </head>


    <body class="yui-skin-sam">

        <div id="canvas">

            <h1>Facebook Overlay Example</h1>

            <p><button id="show-fbOverlay">show overlay</button></p>

            <div id="fbOverlay">

                <div class="yui-widget-hd">
                    <h3>Facebook Overlay Example</h3>
                </div>

                <div class="yui-widget-bd">
                    <p>the body</p>
                </div>

                <div class="yui-widget-ft">
                    <div>
                        <button id="hide-fbOverlay">close</button>
                    </div>
                </div>

            </div>

        </div>

        <script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
        <script type="text/javascript">
			
            YUI().use('overlay', 'dd-constrain', function(Y){
				
                var fbOverlay = new Y.Overlay({
					
                    contentBox : '#fbOverlay',
                    width : '540px',
                    height : '300px',
                    visible : false
										
                }).render();
				
                // make overlay draggable
                new Y.DD.Drag({
					
                    node : fbOverlay.get('boundingBox'),
                    handles : ['.yui-widget-hd']
					
                }).plug(Y.Plugin.DDConstrained, { constrain2view : true });
				
                // show overlay
                Y.get('#show-fbOverlay').on('click', function(e){
                    if ( ! fbOverlay.get('visible') ) {
                        fbOverlay.align(this, [Y.WidgetPositionExt.TL, Y.WidgetPositionExt.TR]);
                        fbOverlay.show();
                    }
                });
				
                // hide overlay
                Y.get('#hide-fbOverlay').on('click', function(e){
                    fbOverlay.hide();
                });
				
            });
			
        </script>

    </body>
</html>
